<template>
  <div class="order-detail">
    <div class="detail-top">
      <img :src="orderTypeData[type]['img']"
           v-if="orderTypeData[type]['img']"
           alt="">
      <nav-bar title="订单详情"
               bgColor="transparent"></nav-bar>
      <span class="top-title">代付款</span>
      <span class="top-text">23小时50分自动关闭</span>
    </div>
    <div class="detail-content">
      <address-card-item :rightShow="false"></address-card-item>
      <div class="content-pick">
        <span>取货码</span>
        <span>11233</span>
      </div>
      <div class="content-good">
        <li class="good-title">
          <van-icon name="shop-o" />
          <span>美的旗舰店</span>
        </li>
        <order-good-card v-for="item in 3"
                         :key="item"
                         :rightShow="true">
        </order-good-card>
        <li class="good-info"
            style="margin-top:0.15rem">
          <span>商品总价</span>
          <span>¥116.00</span>
        </li>
        <li class="good-info">
          <span>配送方式</span>
          <span>包邮</span>
        </li>
        <li class="good-info">
          <span>实付款</span>
          <span>¥116.00</span>
        </li>
      </div>
      <div class="content-order">
        <span class="order-title">订单信息</span>
        <li class="order-info">
          订单编号：1234568545454
        </li>
        <li class="order-info">
          创建时间：2020-09-03 11:11:11
        </li>
        <li class="order-info">
          关闭时间：2020-09-03 11:11:11
        </li>
        <li class="order-info">
          发货时间：2020-09-03 11:11:11
        </li>
        <li class="order-info">
          发货物流：顺丰速递
        </li>
        <li class="order-info">
          物流单号：2123456789
        </li>
        <li class="order-divider"></li>
        <li class="order-footer">
          <img :src="require('@/assets/image/order/kefu.png')"
               alt="">
          联系卖家
        </li>
      </div>
    </div>
    <div class="detail-footer">
      <span>取消订单</span>
      <span>修改地址</span>
      <span class="btn-orange"
            @click="logisticsShow=true">付款</span>
    </div>
    <logistics-popup v-model="logisticsShow"></logistics-popup>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import AddressCardItem from '@/components/AddressCardItem'
import OrderGoodCard from '@/components/OrderGoodCard'
import LogisticsPopup from '@/components/LogisticsPopup'
export default {
  data () {
    return {
      type: '',
      logisticsShow: false,
      orderTypeData: {
        'DAIFUKUAN': {
          img: require('@/assets/image/order/daifukuan.png'),
          button: ['取消订单', '修改地址', '付款']
        },
        'DAIFAHUO': {
          img: require('@/assets/image/order/daifahuo.png'),
          button: ['修改地址', '售后']
        },
        'DAISHOUHUO': {
          img: require('@/assets/image/order/daiquhuo.png'),
          button: ['售后']
        },
        'YIWANCHENG': {
          img: require('@/assets/image/order/yiwancheng.png'),
          button: ['立即评价']
        },
        'JIAOYIGUANBI': {
          img: require('@/assets/image/order/jiaoyiguanbi.png'),
          button: ['取消订单']
        },
        'ZITI': {
          button: ['取消订单', '付款']
        }
      },
    };
  },
  components: {
    NavBar,
    AddressCardItem,
    OrderGoodCard,
    LogisticsPopup
  },
  created () {
    this.type = 'DAIFUKUAN'
  },
  methods: {}
}

</script>

<style lang='scss'>
.order-detail {
  @include top-page;
  background-color: #eeeeee;
  .detail-top {
    position: relative;
    width: 100%;
    height: 2.5rem;
    background: linear-gradient(-90deg, #f28e26 0%, #fd644f 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 2;
    img {
      position: absolute;
      @include wh100;
      z-index: 0;
    }
    span {
      position: absolute;
      left: 0.7rem;
      z-index: 2;
    }
    .top-title {
      top: 55%;
      font-size: 0.28rem;
      font-family: Source Han Sans CN Medium;
      font-weight: 500;
      color: #fefdfd;
      line-height: 0.36rem;
    }
    .top-text {
      top: 75%;
      font-size: 0.24rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fefdfd;
      line-height: 0.36rem;
    }
  }
  .detail-content {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0.1rem;
    @include flex-column;
    .content-good {
      width: 100%;
      background-color: #ffffff;
      @include flex-column;
      box-sizing: border-box;
      padding: 0.2rem 0.2rem 0.2rem 0.4rem;
      border-radius: 0.15rem;
      margin: 0.1rem 0;
      .good-title {
        display: flex;
        align-items: center;
        font-size: 0.28rem;
        font-weight: 600;
        color: #131415;
        margin-bottom: 0.2rem;
        .van-icon {
          font-size: 0.32rem;
          font-weight: 600;
          margin-right: 0.1rem;
        }
      }
      .order-good-card {
        margin: 0.05rem 0;
      }
      .good-info {
        width: 100%;
        height: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.22rem;
        color: #131415;
        font-weight: 600;
        &:last-child {
          font-size: 0.26rem;
          > span {
            &:last-child {
              color: #e85014;
            }
          }
        }
      }
    }
    .content-pick {
      width: 100%;
      height: 1.4rem;
      flex-shrink: 0;
      margin-top: 0.1rem;
      position: relative;
      background-color: #fff;
      border-radius: 0.15rem;
      > span {
        position: absolute;
        &:first-child {
          top: 0.2rem;
          left: 0.4rem;
          font-size: 0.28rem;
          font-weight: 600;
          color: #000000;
        }
        &:last-child {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -25%);
          font-size: 0.42rem;
          font-weight: 600;
          color: #e85014;
        }
      }
    }
    .content-order {
      width: 100%;
      background-color: #ffffff;
      @include flex-column;
      box-sizing: border-box;
      padding: 0.2rem 0.2rem 0.25rem 0.4rem;
      border-radius: 0.15rem;
      .order-title {
        margin-bottom: 0.1rem;
        font-size: 0.28rem;
        font-weight: 600;
        color: #000000;
      }
      .order-info {
        font-size: 0.26rem;
        color: #000000;
        margin: 0.1rem 0;
      }
      .order-divider {
        width: calc(100% + 0.6rem);
        margin-left: -0.4rem;
        height: 1px;
        background-color: #eeeeee;
        margin-top: 0.1rem;
      }
      .order-footer {
        margin-top: 0.25rem;
        width: 100%;
        font-size: 0.26rem;
        font-weight: 600;
        color: #131415;
        display: flex;
        align-items: center;
        img {
          width: 0.36rem;
          height: 0.34rem;
          margin-right: 0.15rem;
        }
      }
    }
  }
  .detail-footer {
    width: 100%;
    height: 1rem;
    box-shadow: 1px 1px 3px rgba(1, 1, 1, 0.1);
    border-top: 1px solid rgba(1, 1, 1, 0.1);
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    span {
      width: 1.6rem;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      border-radius: 1rem;
      border: 1px solid #999999;
      font-size: 0.24rem;
      color: #999999;
      margin-right: 0.25rem;
    }
    .btn-orange {
      border-color: #e85014;
      font-weight: 500;
      color: #e85014;
    }
  }
}
</style>